body {
  /* 背景图片 */
  /* 因为为了让网页不要留白，所以body的背景用cover覆盖满body */
  background: url("../images/bg.jpg") no-repeat left top / cover;
}

/* 版心布局 */
.container {

  max-width: 1920px;
  /* 最小宽度 */
  /* 哪怕你屏幕再小，我也要保证最低显示1280 */
  min-width:  1280px;


  min-height: 130px;
  margin: 0 auto;

  /* 因为logo要完整显示，所以用contain */
  background: url("../images/logo.png") no-repeat left top / contain;

  /* 为了里面的三列在同一行，并且因为版心宽度是变化的，所以用弹性布局可以让三大列的宽度也会伸缩改变 */
  display: flex;

  /* 给版心设置padding */
  padding: 88px 20px 0px 20px;
}

.column {
  flex:3;
}

.column:nth-child(2) {
  /* 第二列占4份 */
  flex:4;
  margin: 0 20px;
}


.panel {

  border: 10px solid red;
  border-width: 51px 41px 25px 128px;
  border-image: url(../images/border.png) 51 41 25 128;
  position: relative;
}

.inner {
  position: absolute;
  left: -128px;
  top:-51px;
  right:-41px;
  bottom:-25px;
  padding: 20px;
}


/* --------------------------------第一列------------------------------- */
/* <!-- 1.1 设备概览 --> */
.overview {

  height: 110px;
}

.overview .inner {
  display: flex;
  align-items: center;
}

.overview .inner .item {
  flex: 1;
  color:white;
  text-align: center;
}

.overview .inner .item p {

  font-size: 22px;
  margin-bottom: 10px;
}

.overview .inner .item span {

 color:#006cff;
}


.overview .inner .item:nth-child(2) span i{

  color: #6acca3;
 }
.overview .inner .item:nth-child(3) span i{

  color: #6acca3;
 }
.overview .inner .item:nth-child(4) span i{

  color: #ed3f35;
 }


/* <!-- 1.2 故障监控 --> */
.monitor {
  height: 474px;
  margin: 20px 0;
}

/* 故障区域里的tab栏 */
.monitor .tabs {

  display: flex;
  justify-content: space-between;
  align-items: center;
  height:30px;
}

.monitor .tabs a {
  font-size: 22px;
  color: #1250c4;
}

.monitor .tabs a.active {

  color: #fff;
}

.monitor .tabs .sep {

  color: #00f2f1;
  font-size: 22px;
}


/* 监控区域里的内容区域 */
.monitor .content {
  margin-top: 10px;
  display: none;
}

.monitor .content.active {  

  display: block;
}

.monitor .titles {

  color:#5bb9dc;
  display: flex;
  height: 38px;
  align-items: center;
  background-color: rgba(255, 255, 255, .1);

  /* 为了把这个div铺满 */
  margin-left: -20px;
  margin-right: -20px;
  /* 再用padding把文字挤进来 */
  padding-left: 20px;
  padding-right: 20px;
}


.monitor .titles span{

  flex:3;
  font-size: 14px;
}

.monitor .titles span:nth-child(2) {

  flex:6;
}


/* 内容里的轮播区域 */
/* 装ul的div */
.monitor .carousel{

  height: 350px;
  position: relative;
  overflow: hidden;

  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.monitor .carousel ul{

  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.monitor .carousel li:hover {
  background-color: green;
}
.monitor .carousel li {

  height: 35px;
  color:#2484e5;
  line-height: 35px;
  display: flex;
  padding-left: 20px;
}

.monitor .carousel li span{

  flex:3;
}

.monitor .carousel li span:nth-child(2){
  flex:6;
  /* 超出显示省略号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* <!-- 1.3 点位分布 --> */
.point {
  height: 330px;
}

.point,.user {
  color:white;
}

.point h3, .user h3 {
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  font-weight: normal;
  margin-bottom: 10px;
}


.point .detail,.user .detail {

  height:240px;
  display: flex;
}

.point .detail .echarts, .user .detail .echarts{

  flex:5;
  background-color: rgba(255,255,255, .3);
}
 .detail .data {

  flex:3;
  background: url("../images/rect.png") no-repeat left top / cover
}

 .detail .data .item {

  height: 50%;
  display: flex;
  /* 垂直方向排列 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.detail .data .item p{
  font-size: 24px;
  margin-bottom: 5px;
}
.detail .data .item span{
  color:#4c9bfd;
}
.detail .data .item i{
  color:#ed3f35;
}
.detail .data .item:nth-child(2) i{
  color:#eacf19;
}

/* --------------------------------第二列------------------------------- */

/* 2.1 地图区域 */
.map {
  height: 603px;
}

.map h3{
  height: 56px;
  line-height: 56px;
  color: white;
  font-size: 24px;
  font-weight: normal;
}

.map h3 i {

  color:#68d8fe;
  margin-right:10px;
}

.map .echarts {
  height: 547px;
  background-color: rgba(255,255,255,.2);
}


/* 2.2 用户数据区域 */
.user {
  height: 330px;
  margin-top:20px;
}


/* --------------------------------第三列------------------------------- */
/* 3.1 订单量 */
.order {
  height: 144px;
}

/* 3.2 销售量 */
.sales {
  height: 244px;
  margin: 20px 0;
}

/*   <!-- 3.3 渠道分布和销售进度 --> */
.chanl-prop>div{

  height: 230px;
  width: 48%;
}


/* 3.4 热榜 */
.hot {
  margin-top:20px;
  height: 276px;
}